<template>
  <view class="franchise_stores">
    <z-nav-bar id="nav" bgColor="#ffffff" title="加盟申请进度详情" ></z-nav-bar>
    <view class="heard_title df align-center">
      <image src="http://www.xvopen.com/xiaoV/img1/apply1.png"></image>
      <text class="mgl-24">{{storeInfo.storeName}}加盟店申请</text>
    </view>
    <view class="steps_wrap mgt-24">
      <up-steps :current="current" direction="column">
        <up-steps-item title="填写相关信息，并提出加盟店申请">
        </up-steps-item>
        <up-steps-item title="后台处理中">
        </up-steps-item>
        <up-steps-item :title="formatActualAmount" desc="11:40"></up-steps-item>
      </up-steps>
    </view>

    <view class="rules" v-if="storeInfo.firstLevelAuditResult">
      <text class="left_t">审核失败原因：</text>
      <text class="right_content">{{storeInfo.firstLevelAuditResult}}</text>
    </view>

  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive ,computed} from 'vue'
import {certificationDetail} from '../../api/pagesShop'
const storeInfo = ref('')
const  current = ref(0)
function loadCertificationDetail(id){
  certificationDetail(id).then(res=>{
    storeInfo.value = res
    //首先确定status的状态
    if(res.status == 1){
      current.value = 1
    }
    if(res.status == 2 || res.status == 3 ){
      current.value = 3
    }
  })
}
onLoad(option=>{
  loadCertificationDetail(option.id)
})

const formatActualAmount =computed({
  get: () =>  {
      let num = Number(storeInfo.value.status)
      let text =''
      switch (num) {
        case 1:
          text = '待审核'
          break;
        case 2:
          text = '审核成功'
          break;
        case 3:
          text = '审核失败'
          break;
        case 4:
          text = '审核失败'
          break;
      }
    return text
  },
  set: (value) => {
    storeInfo.value.status = value;
  }
})
</script>

<style lang="scss">
.franchise_stores{
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 0 32rpx;
  .heard_title{
    padding: 32rpx 0;
    >image{
      width: 90rpx;
      height: 90rpx;
    }
    >text{
      font-weight: 400;
      font-size: 32rpx;
      color: #000000;
    }
    border-bottom: 1rpx solid #E5E5E5;
  }
  .steps_wrap{
    padding-bottom: 32rpx;
    border-bottom: 1rpx solid #E5E5E5;
  }
  .rules{

    padding: 32rpx 0;
    border-bottom: 1rpx solid #E5E5E5;
    .left_t{
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
    }
    .right_content{
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
    }

  }

}

</style>
